<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Dmagic-Heat</title>
  <script type='text/javascript' src="${ctx}/extends/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
	var ctx = "${ctx}";
	$.ajaxSetup({ cache: false });
	
	$(document).ready(function(e) {
        $("td.tdstyle").mouseover(function(e) {
            $(this).addClass("td_over");
        });
		$("td.tdstyle").mouseout(function(e) {
            $(this).removeClass("td_over");
        });
		$("td.tdstyle img").click(function(e) {
			$("td#big img").attr("src", ctx + "/home/imagesrc.do?fileInfoId=" + $(this).attr("data-imgId"))
			               .attr("alt", file.fileName);
        });		
    });	
	
	function switchImage() {
		$("td#big img").attr("src", ctx + "/home/imagesrc.do?fileInfoId=" + $(this).attr("data-imgId"))
				   	   .attr("alt", file.fileName);
	}
  </script>          
  
  <style type="text/css">
    html {
		height:100%;
	}
    body {
		background:url(${ctx}/pages/web/res/bg.png) center repeat-y;
		font-family:"宋体";
		text-align:center;
		margin:0;
		padding:0;
		border:0 none;
	}
	div#container {
		margin:0 auto;
		border:0 none;
		padding:0;
		text-align:center;
		width:1024px;
	}
	div#content {
		margin:0 auto;
		padding-top:10px;
		border:none;
		width:740px;
		min-height:550px;
	}
	div#tool {
		float:right;
		margin-top:5px;
		width:740px;
	}
	div#detail {
		clear:both;
		background:url(${ctx}/pages/web/res/product_parameter.png) top center no-repeat;
		padding-top:5px;
		text-align:left;
		color:#666666;
	}	
	.td_over {
		border:#0FF 1px solid;
	}
	.tdstyle {
		text-align:center;
		width:120px;
		height:62.5px;
	}
	.model {
		margin:0;
		padding:0;
		font-size:12px;
		font-family:"宋体";
		color:#15647a;
		text-indent:20px;
	}
	.remark {
		margin:0;
		padding:0;
		font-family:"宋体";
		font-size:12px;
		color:#666666;
		text-indent:20px;
	}
	.productName {
		font-family:Arial, Helvetica, sans-serif;
		font-size:25px;
		color:#666666;
		text-indent:5px;
	}	
  </style>
</head>

<body>
  <div id="container">
    <div id="content">        
        <div id="productDetail" style="width:740px;">
          <div id="product_parameter">
            <table cols="3" width="736" height="50" border="1" bordercolor="#0e4757" style="border-collapse:collapse">
              <tr>
                <td id="model" width="160" height="25" class="model">
                  <c:choose>
                    <c:when test="${language eq 1}">Product Model:</c:when>
                    <c:otherwise>產品編號：</c:otherwise>
                  </c:choose>
				</td>
                <td id="modelText" width="380" height="25" class="model">${product.productNo}</td>
                <td rowspan="2" class="productName">${product.productName}</td>
              </tr>
              <tr>
                <td colspan="2" width="540" height="25" class="remark">${product.productModel}</td>
              </tr>                            
            </table>
            <div style="margin:-2px 0 0 -2px;"><img src="${ctx}/pages/web/res/product_parameter.png" width="742" /></div>
            <table width="736" height="250" cols="2" border="1" bordercolor="#0e4757" 
            	style="border-collapse:collapse; margin-top:-2px">
              <c:forEach items="${files}" var="f" varStatus="s" begin="1">
               <c:choose>
                <c:when test="${s.index eq 1}">
                  <tr>
                    <td id="big" rowspan="4" style="text-align:center" width="600px" height="250px">
                      <img src="${ctx}/home/imagesrc.do?fileInfoId=${f.uploadFileInfoId}" />
                    </td>
                    <td class="tdstyle">
                      <img src="${ctx}/home/imagesrc.do?fileInfoId=${f.uploadFileInfoId}" 
                       width="120px" height="62px" data-imgId="${f.uploadFileInfoId}" />
                    </td>
                  </tr> 
                </c:when>
                <c:otherwise>
                  <tr>
                    <td class="tdstyle">
                      <img src="${ctx}/home/imagesrc.do?fileInfoId=${f.uploadFileInfoId}" 
                       width="120px" height="62px" data-imgId="${f.uploadFileInfoId}" />
                    </td>
                  </tr> 
                </c:otherwise>
               </c:choose>
              </c:forEach>
            </table>
          </div>
          <div id="tool">
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/5.png" alt="分享到QQ空间" onClick="shareQzone('', '' , '', '', '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/4.png" alt="分享到人人网" onClick="shareRR('', '' , '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/3.png" alt="分享到百度空间" onClick="shareKX('', '' , '')"/>
            </p>      
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/2.png" alt="分享到腾讯微博" onClick="shareToWb('', '' , '', '')"/>
            </p>
            <p style="float:right; padding:3px; cursor:pointer;">
              <img src="${ctx}/pages/web/res/1.png" alt="分享到新浪微博" onClick="shareTSina('', '' , '', '')"/>
            </p>
            <p style="float:right; font:'宋体'; font-size:14px; color:#15647a; padding-top:8px;">分享至：</p> 
          </div>
          <div id="detail">
            <p style="color:#666666">${product.productContent}</p>
          </div>        
        </div>
    </div>   
  </div>
</body>
<script type='text/javascript' src="${ctx}/pages/web/share.js"></script>
</html>
